<template>
  <div class="process-designer-container">
    <div id="bpmn-canvas" class="process-designer-canvas" />
    <div id="bpmn-properties" />
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { getWorkflowXml } from '@/api/workflow'
export default {
  name: 'Bpmn',
  data() {
    return {
      bpmnModeler: null,
      deploymentId: this.$route.params.deploymentId
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.bpmnModeler = new BpmnModeler({
        container: '#bpmn-canvas',
        propertiesPanel: {
          parent: '#bpmn-bpmn-properties'
        }
      })
      getWorkflowXml(this.deploymentId).then(response => {
        this.bpmnModeler.importXML(response.data)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
@import "~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
.process-designer-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
}
</style>
